<template>
  <template v-if="getShow">
    <LoginFormTitle class="enter-x" />
    <el-form 
    class="p-4 enter-x" 
    :model="formData" 
    :rules="getFormRules" 
    :validate-on-rule-change="false"
    ref="formRef">
      <el-form-item prop="account" class="enter-x">
        <el-input
          class="fix-auto-fill"
         
          v-model="formData.account"
          :placeholder="t('sys.login.userName')"/>
      </el-form-item>

      <el-form-item prop="mobile" class="enter-x">
        <el-input
         
          v-model="formData.mobile"
          :placeholder="t('sys.login.mobile')"
          class="fix-auto-fill"/>
      </el-form-item>

      <el-form-item prop="sms" class="enter-x">
        <CountdownInput
         
          class="fix-auto-fill"
          v-model="formData.sms"
          :placeholder="t('sys.login.smsCode')"/>
      </el-form-item>

      <el-form-item prop="password" class="enter-x">
        <StrengthMeter
          :style="{width: '100%'}"
         
          v-model:value="formData.password"
          :placeholder="t('sys.login.password')"/>
      </el-form-item>

      <el-form-item prop="confirmPassword" class="enter-x">
        <el-input 
          type="password"
          show-password
         
          visibilityToggle
          v-model="formData.confirmPassword"
          :placeholder="t('sys.login.confirmPassword')"/>
      </el-form-item>

      <el-form-item class="enter-x" prop="policy">
        <el-checkbox v-model="formData.policy" size="small">
          {{ t('sys.login.policy') }}
        </el-checkbox>
      </el-form-item>

      <el-button
        type="primary"
        class="enter-x"
       
        block
        @click="handleRegister(formRef)"
        :loading="loading"
        :style="{width: '100%'}">
        {{ t('sys.login.registerButton') }}
      </el-button>

      <el-button class="mt-4 enter-x" @click="handleBackLogin" :style="{width: '100%', marginLeft: 0}">
        {{ t('sys.login.backSignIn') }}
      </el-button>
    </el-form>
  </template>
</template>
<script lang="ts" setup>
  import { reactive, ref, unref, computed } from 'vue';
  import LoginFormTitle from './LoginFormTitle.vue';
  import { StrengthMeter } from '/@/components/StrengthMeter';
  import { CountdownInput } from '/@/components/CountDown';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useLoginState, useFormRules, LoginStateEnum } from './useLogin';

  const { t } = useI18n();
  const { handleBackLogin, getLoginState } = useLoginState();

  const formRef = ref();
  const loading = ref(false);

  const formData = reactive({
    account: '',
    password: '',
    confirmPassword: '',
    mobile: '',
    sms: '',
    policy: false,
  });

  const { getFormRules } = useFormRules(formData);

  const getShow = computed(() => unref(getLoginState) === LoginStateEnum.REGISTER);

  async function handleRegister(form) {
    form.validate(v => {
      if(v) {
        console.log(v)
      }
    })
  }
</script>
